<template>
  <div class="space-y-6">
    <div class="flex justify-between items-center">
      <div>
        <h1 class="text-2xl font-bold text-gray-900">啤酒名称生成器</h1>
        <p class="mt-1 text-sm text-gray-500">为您的啤酒生成创意名称</p>
      </div>
    </div>

    <div class="bg-white shadow rounded-lg p-6">
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700">啤酒风格</label>
          <input
            type="text"
            v-model="beerStyle"
            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brew-amber focus:ring-brew-amber sm:text-sm"
            placeholder="例如: 浑浊IPA"
          />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700">目标受众</label>
          <input
            type="text"
            v-model="audience"
            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brew-amber focus:ring-brew-amber sm:text-sm"
            placeholder="例如: 精酿啤酒爱好者"
          />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700">描述词（用逗号分隔）</label>
          <input
            type="text"
            v-model="descriptors"
            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brew-amber focus:ring-brew-amber sm:text-sm"
            placeholder="例如: 多汁, 柑橘, 热带水果"
          />
        </div>
        <div class="pt-4">
          <button
            @click="generateNames"
            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-brew-amber hover:bg-brew-amber-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brew-amber"
          >
            生成名称
          </button>
        </div>
        <div v-if="generatedNames.length > 0" class="pt-4 space-y-2">
          <h3 class="text-lg font-medium text-gray-900">生成的名称：</h3>
          <ul class="space-y-2">
            <li
              v-for="(name, index) in generatedNames"
              :key="index"
              class="p-3 bg-gray-50 rounded-md text-gray-900"
            >
              {{ name }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const beerStyle = ref('')
const audience = ref('')
const descriptors = ref('')
const generatedNames = ref([])

const generateNames = () => {
  if (!beerStyle.value || !audience.value || !descriptors.value) return
  
  const descArray = descriptors.value.split(',').map(d => d.trim())
  
  // 生成5个随机名称
  const names = []
  for (let i = 0; i < 5; i++) {
    const randomDesc = descArray[Math.floor(Math.random() * descArray.length)]
    const name = `${randomDesc} ${beerStyle.value}`
    names.push(name)
  }
  
  generatedNames.value = names
}
</script> 